<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JSON数据</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>

一、JSON格式的user对象:<div id="objectDiv"></div><br>
二、JSON格式的字符串数组:<div id="ArrayDiv"></div><br>
三、JSON格式的user对象数组:<div id="objectArrayDiv"></div>

<script>

        $(document).ready(function() {
            //1．定义JSON格式的user对象,并在id为objectDiv的DIV元素中输出
            var user = {"id":1,"name":"张三","pwd":"000" };
            $("#objectDiv").append("ID："+user.id+"<br>")
                .append("用户名："+user.name+"<br>")
                .append("密码："+user.pwd+"<br>");
            //2．定义JSON格式的字符串数组,并在id为ArrayDiv的DIV元素中输出
            var ary = ["中","美","俄"];
            for(var i=0;i<ary.length;i++) {
                $("#ArrayDiv").append(ary[i]+"  ");
            }
            //3．定义JSON格式的user对象数组,并在id为objectArrayDiv的DIV元素中
            //使用<table>输出
            var userArray = [
                {"id":2,"name":"admin","pwd":"123"},
                {"id":3,"name":"詹姆斯","pwd":"11111"},
                {"id":4,"name":"梅西","pwd":"6666"}
            ];
            $("#objectArrayDiv").append("<table>")
                .append("<tr>")
                .append("<td>ID</td>")
                .append("<td>用户名</td>")
                .append("<td>密码</td>")
                .append("</tr>");
            for(var i=0;i<userArray.length;i++) {
                $("#objectArrayDiv").append("<tr>")
                    .append("<td>"+userArray[i].id+"&nbsp;</td>")
                    .append("<td>"+userArray[i].name+"&nbsp;</td>")
                    .append("<td>"+userArray[i].pwd+"</td>")
                    .append("</tr>");
            }
            $("#objectArrayDiv").append("</table>");
        });

    </script>
</body>
</html>